<!-- 统计面板 -->
<div class="panel">
  <div class="statistics" *ngFor="let item of statisticsDataArr">
    <mat-icon>power_settings_new</mat-icon>
    <div class="data-box">
      <span>{{item.key}}</span>
      <span>{{item.value}}</span>
    </div>
  </div>
</div>


<!-- 表格区 -->
<div class="table-box">
  <!-- 站点table -->
  <div class="site-list">
    <h2 class="mat-h1">站点列表</h2>
    <mat-chip-list aria-label="Fish selection">
      <mat-chip color="primary" selected>站点数量：3</mat-chip>
      <mat-chip color="accent" selected>在线数量：3</mat-chip>
    </mat-chip-list>
    <table mat-table [dataSource]="TABLE_DATA" class="table">
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>状态</th>
        <td mat-cell *matCellDef="let element">
          <mat-icon
            [class]="{'warn': element.status == 1, 'safe': element.status == 2, 'normal': element.status == 3 }">room
          </mat-icon>
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>名称</th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <ng-container matColumnDef="lastReportTime">
        <th mat-header-cell *matHeaderCellDef>最后上报时间</th>
        <td mat-cell *matCellDef="let element"> {{element.lastReportTime}} </td>
      </ng-container>

      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
            <span class="material-icons">more_horiz</span>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="goDetail(element)">
              <mat-icon>display_settings</mat-icon>
              <span>详情</span>
            </button>
          </mat-menu>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

  <!-- 右侧两个上下排列表格 -->
  <div class="power-price">
    <div class="power-trend">
      <h2 class="mat-h1">功率趋势</h2>
      <mat-chip color="primary" selected>范围：2022-05-14 </mat-chip>
      <!-- echarts图表容器 -->
      <div echarts [options]="chartOption" class="demo-chart"></div>
    </div>
    <div class="time-electricity-price">
      <h2 class="mat-h1">分时电价</h2>
      <mat-tab-group mat-align-tabs="start">
        <mat-tab label="珠海">
          <table mat-table [dataSource]="TABLE_DATA" class="table">
            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef>状态</th>
              <td mat-cell *matCellDef="let element">
                <span class="material-icons">
                  room
                </span>
              </td>
            </ng-container>

            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>名称</th>
              <td mat-cell *matCellDef="let element"> {{element.name}} </td>
            </ng-container>

            <ng-container matColumnDef="lastReportTime">
              <th mat-header-cell *matHeaderCellDef>最后上报时间</th>
              <td mat-cell *matCellDef="let element"> {{element.lastReportTime}} </td>
            </ng-container>

            <ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef>操作</th>
              <td mat-cell *matCellDef="let element">
                <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
                  <span class="material-icons">more_horiz</span>
                </button>
                <mat-menu #menu="matMenu">
                  <button mat-menu-item>
                    <mat-icon>dialpad</mat-icon>
                    <span>Redial</span>
                  </button>
                  <button mat-menu-item disabled>
                    <mat-icon>voicemail</mat-icon>
                    <span>Check voice mail</span>
                  </button>
                  <button mat-menu-item>
                    <mat-icon>notifications_off</mat-icon>
                    <span>Disable alerts</span>
                  </button>
                </mat-menu>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </mat-tab>
        <mat-tab label="中山">Content 2</mat-tab>
        <mat-tab label="深圳">Content 3</mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>
